/* components/audio-play/audio-play.wxss */
@baseColor: #000;

.micro {
  width: 40rpx;
  height: 40rpx;
  position: relative;

  .circle {
    position: absolute;
    box-sizing: border-box;
    border-radius: 50%;
  }

  .first {
    width: 20%;
    height: 20%;
    left: 41%;
    top: 40%;
    background: @baseColor;
  }

  .second {
    width: 58%;
    height: 58%;
    left: 21%;
    top: 21%;
    border: 4rpx solid @baseColor;

    &.play {
      animation: fadeInOut 1s infinite 0.2s;
    }
  }

  .third {
    width: 99%;
    height: 99%;
    left: 0;
    top: 0;
    border: 4rpx solid @baseColor;

    &.play {
      animation: fadeInOut 1s infinite .4s;
    }
  }

  font-size: 28rpx;
  clip-path: polygon(50% 50%, 100% 0, 100% 100%);
}

@keyframes fadeInOut {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}